<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>销售概览</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 总客户数 -->
    <el-card>
      <div style="display: flex; justify-content: space-between;">
        <div>
          <div class="smallFont">总客户数（人）</div>
          <div class="bigFont">{{num1}}</div>
        </div>

        <div>
          <el-date-picker
            v-model="time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </div>
      </div>

      <!-- 图表 -->
      <div ref="SCEchart1" style="height: 150px; width: 100%;"></div>
    </el-card>

    <el-card>
      <div style="margin-left: 10px;">
          <el-form :inline="true" :model="queryData" class="user-search">
              <el-date-picker
                  v-model="queryData.time"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
              </el-date-picker>

              <el-select v-model="queryData.name" filterable placeholder="请选择">
                  <el-option
                      v-for="item in options"
                      :key="item.deptId"
                      :label="item.deptName"
                      :value="item.deptId">
                  </el-option>
              </el-select>
          </el-form>
      </div>

      <el-row>
        <!-- 左侧 -->
        <el-col :span="18">
          <!-- 第一排 -->
          <el-row>
            <el-col :span="12">
              <div class="kuang">
                <div class="smallFont">成交客户数（人）</div>
                <div class="bigFont">{{num2}}</div>
                <div class="cavasbox" ref="SCEchart2"></div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="kuang">
                <div class="smallFont">成交订单数（单）</div>
                <div class="bigFont">{{num3}}</div>
                <div class="cavasbox" ref="SCEchart3"></div>
              </div>
            </el-col>
          </el-row>

          <!-- 第二排 -->
          <el-row>
            <el-col :span="12">
              <div class="kuang">
                <div class="smallFont">销售额</div>
                <div class="bigFont">{{num4}}</div>
                <div class="cavasbox" ref="SCEchart4"></div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="kuang">
                <div class="smallFont">客单价</div>
                <div class="bigFont">{{num5}}</div>
                <div class="cavasbox" ref="SCEchart5"></div>
              </div>
            </el-col>
          </el-row>

          <!-- 第三排 -->
          <div class="kuang">
            <div class="smallFont">首单平均成交周期</div>
            <div ref="SCEchart6" style="height: 150px;"></div>
          </div>

        </el-col>
        <!-- 右侧 -->
        <el-col :span="6">
          <div class="kuang" style="height: 610px;">
            <div class="smallFont">排行榜</div>
            <el-button-group>
              <el-button type="primary" @click="rankShow = 'price'">成交额</el-button>
              <el-button type="primary" @click="rankShow = 'client'">成交客户数</el-button>
            </el-button-group>
              <div v-if="rankShow == 'price'" v-for="(item, index) in priceRank" style="margin: 10px; display: flex; justify-content: center">
                  <div style="font-size: 20px; flex: 1">{{index + 1}}</div>
                  <div style="font-size: 20px; flex: 1">{{item.userName}}</div>
                  <div style="font-size: 20px; flex: 1">{{item.number}}元</div>
              </div>

              <div v-if="rankShow == 'client'" v-for="(item, index) in clientRank" style="margin: 10px; display: flex; justify-content: center">
                  <div style="font-size: 20px; flex: 1">{{index + 1}}</div>
                  <div style="font-size: 20px; flex: 1">{{item.userName}}</div>
                  <div style="font-size: 20px; flex: 1">{{item.number}}人</div>
              </div>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import * as Chart from "echarts";

export default {
  data() {
    return {
      startTime: '',
      // 总人数时间筛选
      time: [],
      // 搜索框
      queryData: {
        time: [],
        deptId: '',
        empId: '',
      },
      // 下拉选项
      options: [],

      // 图表 1
      SCEoption1: {
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}月 : {c}"
        },
        legend: {
          data: [{
            name: '',
            icon: 'rect'
          }],
          top: 1,
          left: 1,
          itemGap: 10,
          itemWidth: 12,
          itemHeight: 12,
          textStyle: {
            fontSize: 12,
            color: "#323232"
          }
        },
        grid: {
          left: 50,
          right: 10,
          top: 30,
          bottom: 30,
          borderWidth: 1
        },
        xAxis: {
          type: 'category',
          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            height: 70,
            interval: 0,
            textStyle: {
              fontSize: 10,
              color: "#999999"
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            textStyle: {
              fontSize: 10,
              color: "#999999"
            }
          }
        },
        series: [{
          name: '',
          type: 'bar',
          barGap: 0,
          data: [50000, 70000, 80000, 40000, 50000, 30000, 40000, 60000, 50000, 40000, 60000, 40000],
          barWidth: 10,
          itemStyle: {
            normal: {
              color: new Chart.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  { offset: 0, color: '#83bff6' },
                  { offset: 0.5, color: '#188df0' },
                  { offset: 1, color: '#188df0' }
                ]
              )
            },
            emphasis: {
              color: new Chart.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  { offset: 0, color: '#2378f7' },
                  { offset: 0.7, color: '#2378f7' },
                  { offset: 1, color: '#83bff6' }
                ]
              )
            }
          }
        }]
      },
        // 图表 2
        SCEoption2: {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}月 : {c}"
            },
            legend: {
                data: [{
                    name: '',
                    icon: 'rect'
                }],
                top: 1,
                left: 1,
                itemGap: 10,
                itemWidth: 12,
                itemHeight: 12,
                textStyle: {
                    fontSize: 12,
                    color: "#323232"
                }
            },
            grid: {
                left: 50,
                right: 10,
                top: 30,
                bottom: 30,
                borderWidth: 1
            },
            xAxis: {
                type: 'category',
                data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
                axisLine: {
                    lineStyle: {
                        color: "#999999",
                        width: 1
                    }
                },
                axisLabel: {
                    margin: 14,
                    height: 70,
                    interval: 0,
                    textStyle: {
                        fontSize: 10,
                        color: "#999999"
                    }
                }
            },
            yAxis: {
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: "#999999",
                        width: 1
                    }
                },
                axisLabel: {
                    margin: 14,
                    textStyle: {
                        fontSize: 10,
                        color: "#999999"
                    }
                }
            },
            series: [{
                name: '',
                type: 'bar',
                barGap: 0,
                data: [50000, 70000, 80000, 40000, 50000, 30000, 40000, 60000, 50000, 40000, 60000, 40000],
                barWidth: 10,
                itemStyle: {
                    normal: {
                        color: new Chart.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                { offset: 0, color: '#83bff6' },
                                { offset: 0.5, color: '#188df0' },
                                { offset: 1, color: '#188df0' }
                            ]
                        )
                    },
                    emphasis: {
                        color: new Chart.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                { offset: 0, color: '#2378f7' },
                                { offset: 0.7, color: '#2378f7' },
                                { offset: 1, color: '#83bff6' }
                            ]
                        )
                    }
                }
            }]
        },
        // 图表 3
        SCEoption3: {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}月 : {c}"
            },
            legend: {
                data: [{
                    name: '',
                    icon: 'rect'
                }],
                top: 1,
                left: 1,
                itemGap: 10,
                itemWidth: 12,
                itemHeight: 12,
                textStyle: {
                    fontSize: 12,
                    color: "#323232"
                }
            },
            grid: {
                left: 50,
                right: 10,
                top: 30,
                bottom: 30,
                borderWidth: 1
            },
            xAxis: {
                type: 'category',
                data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
                axisLine: {
                    lineStyle: {
                        color: "#999999",
                        width: 1
                    }
                },
                axisLabel: {
                    margin: 14,
                    height: 70,
                    interval: 0,
                    textStyle: {
                        fontSize: 10,
                        color: "#999999"
                    }
                }
            },
            yAxis: {
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: "#999999",
                        width: 1
                    }
                },
                axisLabel: {
                    margin: 14,
                    textStyle: {
                        fontSize: 10,
                        color: "#999999"
                    }
                }
            },
            series: [{
                name: '',
                type: 'bar',
                barGap: 0,
                data: [50000, 70000, 80000, 40000, 50000, 30000, 40000, 60000, 50000, 40000, 60000, 40000],
                barWidth: 10,
                itemStyle: {
                    normal: {
                        color: new Chart.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                { offset: 0, color: '#83bff6' },
                                { offset: 0.5, color: '#188df0' },
                                { offset: 1, color: '#188df0' }
                            ]
                        )
                    },
                    emphasis: {
                        color: new Chart.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                { offset: 0, color: '#2378f7' },
                                { offset: 0.7, color: '#2378f7' },
                                { offset: 1, color: '#83bff6' }
                            ]
                        )
                    }
                }
            }]
        },
        // 图表 4
        SCEoption4: {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}月 : {c}"
            },
            legend: {
                data: [{
                    name: '',
                    icon: 'rect'
                }],
                top: 1,
                left: 1,
                itemGap: 10,
                itemWidth: 12,
                itemHeight: 12,
                textStyle: {
                    fontSize: 12,
                    color: "#323232"
                }
            },
            grid: {
                left: 50,
                right: 10,
                top: 30,
                bottom: 30,
                borderWidth: 1
            },
            xAxis: {
                type: 'category',
                data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
                axisLine: {
                    lineStyle: {
                        color: "#999999",
                        width: 1
                    }
                },
                axisLabel: {
                    margin: 14,
                    height: 70,
                    interval: 0,
                    textStyle: {
                        fontSize: 10,
                        color: "#999999"
                    }
                }
            },
            yAxis: {
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: "#999999",
                        width: 1
                    }
                },
                axisLabel: {
                    margin: 14,
                    textStyle: {
                        fontSize: 10,
                        color: "#999999"
                    }
                }
            },
            series: [{
                name: '',
                type: 'bar',
                barGap: 0,
                data: [50000, 70000, 80000, 40000, 50000, 30000, 40000, 60000, 50000, 40000, 60000, 40000],
                barWidth: 10,
                itemStyle: {
                    normal: {
                        color: new Chart.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                { offset: 0, color: '#83bff6' },
                                { offset: 0.5, color: '#188df0' },
                                { offset: 1, color: '#188df0' }
                            ]
                        )
                    },
                    emphasis: {
                        color: new Chart.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                { offset: 0, color: '#2378f7' },
                                { offset: 0.7, color: '#2378f7' },
                                { offset: 1, color: '#83bff6' }
                            ]
                        )
                    }
                }
            }]
        },
        // 图表 5
        SCEoption5: {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}月 : {c}"
            },
            legend: {
                data: [{
                    name: '',
                    icon: 'rect'
                }],
                top: 1,
                left: 1,
                itemGap: 10,
                itemWidth: 12,
                itemHeight: 12,
                textStyle: {
                    fontSize: 12,
                    color: "#323232"
                }
            },
            grid: {
                left: 50,
                right: 10,
                top: 30,
                bottom: 30,
                borderWidth: 1
            },
            xAxis: {
                type: 'category',
                data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
                axisLine: {
                    lineStyle: {
                        color: "#999999",
                        width: 1
                    }
                },
                axisLabel: {
                    margin: 14,
                    height: 70,
                    interval: 0,
                    textStyle: {
                        fontSize: 10,
                        color: "#999999"
                    }
                }
            },
            yAxis: {
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: "#999999",
                        width: 1
                    }
                },
                axisLabel: {
                    margin: 14,
                    textStyle: {
                        fontSize: 10,
                        color: "#999999"
                    }
                }
            },
            series: [{
                name: '',
                type: 'bar',
                barGap: 0,
                data: [50000, 70000, 80000, 40000, 50000, 30000, 40000, 60000, 50000, 40000, 60000, 40000],
                barWidth: 10,
                itemStyle: {
                    normal: {
                        color: new Chart.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                { offset: 0, color: '#83bff6' },
                                { offset: 0.5, color: '#188df0' },
                                { offset: 1, color: '#188df0' }
                            ]
                        )
                    },
                    emphasis: {
                        color: new Chart.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                { offset: 0, color: '#2378f7' },
                                { offset: 0.7, color: '#2378f7' },
                                { offset: 1, color: '#83bff6' }
                            ]
                        )
                    }
                }
            }]
        },
        // 图表 6
        SCEoption6: {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}月 : {c}"
            },
            legend: {
                data: [{
                    name: '',
                    icon: 'rect'
                }],
                top: 1,
                left: 1,
                itemGap: 10,
                itemWidth: 12,
                itemHeight: 12,
                textStyle: {
                    fontSize: 12,
                    color: "#323232"
                }
            },
            grid: {
                left: 50,
                right: 10,
                top: 30,
                bottom: 30,
                borderWidth: 1
            },
            xAxis: {
                type: 'category',
                data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
                axisLine: {
                    lineStyle: {
                        color: "#999999",
                        width: 1
                    }
                },
                axisLabel: {
                    margin: 14,
                    height: 70,
                    interval: 0,
                    textStyle: {
                        fontSize: 10,
                        color: "#999999"
                    }
                }
            },
            yAxis: {
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: "#999999",
                        width: 1
                    }
                },
                axisLabel: {
                    margin: 14,
                    textStyle: {
                        fontSize: 10,
                        color: "#999999"
                    }
                }
            },
            series: [{
                name: '',
                type: 'bar',
                barGap: 0,
                data: [50000, 70000, 80000, 40000, 50000, 30000, 40000, 60000, 50000, 40000, 60000, 40000],
                barWidth: 10,
                itemStyle: {
                    normal: {
                        color: new Chart.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                { offset: 0, color: '#83bff6' },
                                { offset: 0.5, color: '#188df0' },
                                { offset: 1, color: '#188df0' }
                            ]
                        )
                    },
                    emphasis: {
                        color: new Chart.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                { offset: 0, color: '#2378f7' },
                                { offset: 0.7, color: '#2378f7' },
                                { offset: 1, color: '#83bff6' }
                            ]
                        )
                    }
                }
            }]
        },

        // 总客户数
        num1: 0,
        // 成交客户数
        num2: 0,
        // 成交订单数
        num3: 0,
        // 销售额
        num4: 0,
        // 客单价
        num5: 0,
        // 成交客户排行榜
        clientRank:[],
        // 成交额排行榜
        priceRank:[],
        // 排行榜显示
        rankShow: 'price',
    }
  },

  methods: {
      getChartOne(){
          let map = {"startTime": this.time[0], "endTime": this.time[1]}
          let that = this;
          this.$request("/api/statistics/getClientNum/1_0", map, "POST").then((data) => {
              let xArr = []
              let yArr = []
              let sum = parseInt(0);
              data.rows.map((item) => {
                  xArr.push(item.everyDayCreateTime)
                  yArr.push(item.everyDayClientNum)
                  sum += parseInt(item.everyDayClientNum);
              })
              that.SCEoption1.xAxis.data = xArr;
              that.SCEoption1.series[0].data = yArr;
              that.num1 = sum;

              that.chart = Chart.init(that.$refs.SCEchart1);
              that.chart.setOption(this.SCEoption1)
          })
      },

      getChartTwo(){
          let empId = '1221332454';
          let startTime = this.queryData.time[0];
          let endTime = this.queryData.time[1];

          let that = this;
          this.$request("/api/generalize/getClinchClient/1_0", {empId, startTime, endTime}, "POST").then((data) => {
              let timeArr = []
              let numArr = []
              let sum = parseInt(0);
              data.rows.map((item) => {
                  timeArr.push(item.time)
                  numArr.push(item.number)
                  sum += parseInt(item.number);
              })

              that.SCEoption2.xAxis.data = timeArr;
              that.SCEoption2.series[0].data = numArr;
              that.num2 = sum;

              that.chart = Chart.init(that.$refs.SCEchart2);
              that.chart.setOption(this.SCEoption2)
          })
      },
      getChartThree(){
          let empId = '1221332454';
          let startTime = this.queryData.time[0];
          let endTime = this.queryData.time[1];

          let that = this;
          this.$request("/api/generalize/getClinchOrder/1_0", {empId, startTime, endTime}, "POST").then((data) => {
              let timeArr = []
              let numArr = []
              let sum = parseInt(0);
              data.rows.map((item) => {
                  timeArr.push(item.time)
                  numArr.push(item.number)
                  sum += parseInt(item.number);
              })

              that.SCEoption3.xAxis.data = timeArr;
              that.SCEoption3.series[0].data = numArr;
              that.num3 = sum;

              that.chart = Chart.init(that.$refs.SCEchart3);
              that.chart.setOption(this.SCEoption3)
          })
      },
      getChartFour(){
          let empId = '1221332454';
          let startTime = this.queryData.time[0];
          let endTime = this.queryData.time[1];

          let that = this;
          this.$request("/api/generalize/getSumPrice/1_0", {empId, startTime, endTime}, "POST").then((data) => {
              let timeArr = []
              let numArr = []
              let sum = parseInt(0);
              data.rows.map((item) => {
                  timeArr.push(item.time)
                  numArr.push(item.number)
                  sum += parseInt(item.number);
              })

              that.SCEoption4.xAxis.data = timeArr;
              that.SCEoption4.series[0].data = numArr;
              that.num4 = sum;

              that.chart = Chart.init(that.$refs.SCEchart4);
              that.chart.setOption(this.SCEoption4)
          })
      },
      getChartFive(){
          let empId = '1221332454';
          let startTime = this.queryData.time[0];
          let endTime = this.queryData.time[1];

          let that = this;
          this.$request("/api/generalize/getAvgPrice/1_0", {empId, startTime, endTime}, "POST").then((data) => {
              let timeArr = []
              let numArr = []
              let sum = parseInt(0);
              data.rows.map((item) => {
                  timeArr.push(item.time)
                  numArr.push(item.number)
                  sum += parseInt(item.number);
              })

              that.SCEoption5.xAxis.data = timeArr;
              that.SCEoption5.series[0].data = numArr;
              that.num5 = sum;

              that.chart = Chart.init(that.$refs.SCEchart5);
              that.chart.setOption(this.SCEoption5)
          })
      },
      getChartSix(){
          let empId = '1221332454';
          let startTime = this.queryData.time[0];
          let endTime = this.queryData.time[1];

          let that = this;
          this.$request("/api/generalize/fristClinchCycle/1_0", {empId, startTime, endTime}, "POST").then((data) => {
              let xArr = []
              let yArr = []
              data.rows.map((item) => {
                  xArr.push(item.clientName)
                  yArr.push(item.number)
              })

              that.SCEoption6.xAxis.data = xArr;
              that.SCEoption6.series[0].data = yArr;

              that.chart = Chart.init(that.$refs.SCEchart6);
              that.chart.setOption(this.SCEoption6)
          })
      },
      getClientRank(){
          let that = this;
          this.$request("/api/generalize/clientRank/1_0", {}, "POST").then((data) => {
              that.clientRank = data.rows;
          })
      },
      getPriceRank(){
          let that = this;
          this.$request("/api/generalize/priceRank/1_0", {}, "POST").then((data) => {
              that.priceRank = data.rows;
          })
      },
      // 时间区间
      setTime() {
          const nowD = new Date()
          nowD.setTime(nowD.getTime() - 7 * 3600 * 1000 * 24)
          // 第一层总人数统计时间区间
          this.time[0] = nowD
          this.time[1] = new Date()
          // 第二、三层小图表
          this.queryData.time[0] = nowD
          this.queryData.time[1] = new Date()
      },
      // 部门列表下拉框
      getDeptList() {
          let that = this;
          this.$request("/api/emp/getDeptList/1_0", {}, "POST").then((data) => {
              that.options = data.rows
              that.queryData.deptId = data.rows[0].deptId;
          })
      },
  },

    created(){
      this.setTime();
      this.getDeptList();
      this.getChartOne();
      this.getChartTwo();
      this.getChartThree();
      this.getChartFour();
      this.getChartFive();
      this.getChartSix();
      this.getPriceRank();
      this.getClientRank();
  },
}
</script>

<style scoped>
.el-card {margin-top: 15px; width: 1640px;}
/deep/ .el-card__body {padding: 10px 12px;}

.kuang {border: 1px solid rgb(215,215,215); border-radius: 10px; padding: 10px; margin: 8px;}
.smallFont {font-weight: 600; font-size: 14px;}
.bigFont {font-weight: 700; font-size: 35px;}
.el-button-group {margin: 15px 85px;}

.cavasbox{height: 120px;}
</style>
